<template>
    <div :style="sty">
        <Spin fix v-if="isSpin">
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
            <div>Loading</div>
        </Spin>
        <viewer :images="photo">
            <img
                    v-for="(src,index) in photo"
                    :src="src"
                    :key="index"
                    style="width: 500px;"
            >
        </viewer>
    </div>
</template>
<script>

    import {Api} from '../api'

    export default {
        name: "imgDetails",
        data(){
            return {
                isSpin: true,
                sty:{
                    margin:'auto',
                    width: '100%',
                    textAlign: 'center'
                },
                photo: []
            }
        },
        mounted() {
            this.query();
        },
        methods: {
            query(){
                this.$http.get(Api.getPTWSchemeFile + '/' + this.$route.query.id, {
                    params: {}
                }).then(function(res){
                    this.photo = [res.data.picture];
                    this.isSpin = false;
                }, function(res){
                    this.$Message.error('请求失败');
                });
            }
        }
    }
</script>

<style scoped>
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
</style>
